<template>
  <view class="totalTop" v-if="balanceList[0]">
    <view class="total_top1">
      <view class="total_left">
        <text>{{ balanceList[0].name }}</text>
        <text>￥</text>
        <text>{{ balanceList[0].value }}</text>
      </view>
      <view class="total_right"><text @click="submit('1')">绑卡</text></view>
    </view>
    <view class="total_top3">
      <view class="">
        <text>{{ balanceList[1].name }}</text>
        <text>￥</text>
        <text>{{ balanceList[1].value }}</text>
      </view>
      <!-- <view class="" style="opacity: 0;">
        <text>累计提现</text>
        <text>￥</text>
        <text>1199999</text>
      </view> -->
      <view class="">
        <text>{{ balanceList[2].name }}</text>
        <text>￥</text>
        <text>{{ balanceList[2].value }}</text>
      </view>
    </view>
    <image src="../../static/index/icon2.png" mode="" style="width: 150rpx;height: 147rpx;" class="image"></image>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { showLoading } from '@/utils/prompt';
import { accountList } from '@/gql/user';
import { getDriverID } from '@/stores/driverID';
import { toPublish } from '@mqtt';
const driver_id = getDriverID();

const balanceList = ref([]);
getAccountInfo();
const props = defineProps({
  type: {
    type: String,
    default: '',
  },
});
function getAccountInfo() {
  showLoading();
  const payload = {
    query: accountList,
    variables: { driver_id, type: props.type },
  };
  toPublish('ql/driver/accountTotalList', payload, (obj: any) => {
    balanceList.value = obj.data.account_total_list;
  });
}
function submit(num) {
  switch (num) {
    case '1':
      uni.navigateTo({
        url: '/pages/giftCard/tokenCard',
      });
      break;
  }
}
defineExpose({
  getAccountInfo,
});
</script>

<style scoped lang="less">
@import url('../account/less/accountTop.less');
</style>
